<template>
    <section class="content">
        <navbar :title="$t('gerenzhongxin.xiugaimima')" :right_show="false" :type="1" ref="navbar"></navbar>
        <section class="cont">
			<img :src="this.$https.baseUrl + setting.site_logo" class="img1" alt="">
			<!-- <img src="../assets/newimg/logo.png" class="img1" alt=""> -->
			<img src="../assets/newimg/logobt.png" class="img2" alt="">
			<div class="cons">
				<div class="shurukuangBox">
					<div class="item">
						<div>
							<img src="../assets/newimg/zhanghu.png" alt="">
						</div>
						<input type="text" v-model="form.username" :placeholder="$t('zhuce.username_placeholder')">
					</div>
					
					<div class="item">
						<div>
							<img class="img3" src="../assets/newimg/mima.png" alt="">
						</div>
						<input type="password" v-model="form.password" :placeholder="$t('common.qingshuru') + $t('bangding.xinmima')">
					</div>
					<div class="item">
						<div>
							<img class="img3" src="../assets/newimg/mima.png" alt="">
						</div>
						<input type="password" v-model="form.npassword" :placeholder="$t('common.qingshuru') + $t('bangding.querenmima')">
					</div>
					<div class="item">
						<div>
							<img class="img4" src="../assets/newimg/shouji.png" alt="">
						</div>
						<input type="number" v-model="form.phone" :placeholder="$t('zhuce.phone_placeholder')">
					</div>
					<div class="item" >
						<div>
							<img class="img4" src="../assets/newimg/shouji.png" alt="">
						</div>
						<input type="number" v-model="form.code" :placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
						<i style="color: #fcc027;font-size: 12px;padding-right: 10px;" v-if="!fasong" @click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
						<article v-else>
						    <van-count-down ref="countDown" @finish="finish" :time="time" format="ss"/>s
						</article>
					</div>
					<div class="buttBoxss" @click="fun_sumbit">
						{{$t('common.queren')}}
					</div>
				</div>
			</div>
        </section>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    import { CountDown } from 'vant'
    export default {
        name: "xiugaimima",
        components: {
            navbar,
            [CountDown.name]: CountDown
        },
        mounted() {

        },
        data() {
            return {
                time:  60 * 1000 * 2,
                fasong: false,
                form: {
                    username: '',
                    password: '',
                    npassword: '',
                    code: '',
					phone:'',
                },
				setting: this.$store.state.config
            }
        },
        methods: {
            fun_huoqu() { //获取短信验证码
            	if (this.form.phone == '') {
            		this.$toast(this.$t('zhuce.phone_alert'))
            	} else {
            		///处理
            		this.$https.fetchGet('/m/rmsgcode', {
            			'phone': this.form.phone
            		}).then(res => {
            			if (res.status.errorCode == 0) {
            				this.$toast(res.status.msg)
            				this.fasong = true
            			} else {
            				this.$toast(res.status.msg)
            			}
            		}).catch(err => {
            			this.$toast(this.$t('chongzhi.title31'));
            		})
            
            	}
            },
            finish() { //倒计时结束
                this.fasong = false
            },
            fun_sumbit() {
            	// if(this.invite_code){
            	//        this.form.invite_code=this.invite_code;
            	//    }
            	if (this.form.phone == '') {
            		this.$toast(this.$t('zhuce.phone_placeholder'))
            	} else if (this.form.username == '') {
            		this.$toast(this.$t('zhuce.username_alert'))
            	} else if (this.form.password == '') {
            		this.$toast(this.$t('zhuce.password_alert'))
            	} else if (this.form.password.length < 6) {
            		this.$toast(this.$t('zhuce.password_alert_length'))
            	} else if (this.form.npassword == '') {
            		this.$toast(this.$t('zhuce.password2_alert'))
            	} else if (this.form.password != this.form.npassword) {
            		this.$toast(this.$t('zhuce.password_alert_buyizhi'))
            	} else if (this.form.code == '' && this.setting.sms_message == 1) {
            		this.$toast(this.$t('zhuce.code_alert'))
            	} else {
            		this.$https.fetchPost('/m/retrieve', this.form).then(res => {
            			this.$router.push('/')
            		})
            	}
            }
        }
    }
</script>

<style scoped lang="less">
	.buttBoxss {
		width: 100%;
		height: 40px;
		background: linear-gradient(to bottom, #eebf46 0%, #f49321 100%) !important;
		font-size: .4rem;
		border:none;
		color: #fff;
		line-height: 40px;
		border-radius: .2rem;
		text-align: center;
	}
	.shurukuangBox {
		padding: 24px 20px;
		text-align: right;
		background-color: #303030;
	
		.item {
			display: flex;
			align-items: center;
			height: 40px;
			border-radius: 5px;
			margin-bottom: 12px;
			background: #fff;
			overflow: hidden;
	
			&>div{
				width: 1rem;
				height: 1rem;
				display: flex;
				justify-content: center;
				align-items: center;
				
				img{
				    width: 30px;
				    height: 28px;
				}
				.img3{
					width: 18px;
					height: 18px;
				}
				.img4{
					width: 22px;
					height: 20px;
				}
			}
	
			input {
				flex: 1;
				color: #f49623;
				height: 38px;
				background: none;
				font-size: 14px;
				border: 0px;
				&::-webkit-input-placeholder {
				    color: #f49623;
				}
			}
			article{
			    color: #fcc027;
			    display: flex;
			    align-items: flex-end;
				padding-right: 20px;
				font-size: 14px;
				line-height: 22px;
			    div{
			        color: #fcc027;
			        margin-right: .1rem;
					line-height: 22px;
			    }
			}
		}
	}
    .content{
		height: 100vh;
		width: 100%;
		background-image: url('../assets/newimg/loginbg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		
		.img1{
			margin: 0 auto;
		    margin-top: 30px;
		    max-width: 290px;
			max-height: 120px;
		}
		.img2{
			width: 97%;
			margin: -10px auto 10px;
		}
		
		.cons{
			margin: 0 17px;
			border: 0;
			border-top-width: 2px;
			border-style: solid;
			border-top-color: #f49623;
		}
		
        .cont{
            color: #fff;
            & > article{
                width: 98%;
                margin:0 auto;
                display: flex;
                padding: 0 .4rem;
                border-bottom: 1px solid #292d30;
                font-size: .4rem;
                line-height: 1.6rem;
                span{
                    display: block;
                    width: 20%;
                    text-align: left;
                }
                input{
                    width: 55%;
                    color: #fff;
                    border:none;
                    background: transparent;
                }
                article{
                    color: #fff;
                    width: 26%;
                    display: flex;
                    align-items: center;
                    div{
                        color: #fff;
                        margin-right: .1rem;
                    }
                }
            }
            & > button{
                background: linear-gradient(to bottom, #eb5d4d 0%, #fb2464 100%) !important;
                font-size: .46rem;
                border-radius: .2rem;
                width: 92%;
                margin:1.5rem auto 0;
                border: none;
                line-height: 1.5rem;
            }
        }

    }
	/deep/.van-count-down{
	    color: #f49623;
		font-size: 13px;
	}
</style>
